<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数码时钟</title>
    <style>
        span{
            font-size: 54px;
        }
        body{
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>当前时间：</span>
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
        <span>点</span>
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
        <span>分</span>
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
        <span>秒</span>
    </div>
    <script>
        /* 
            思路
                自身：获取时分秒，字符串索引值获取，整体重新渲染修改路径
                课堂：6个img各自设置id并设置变量存储起来，通过img的src属性修改【数值取整求余方法，不用字符串方法】
        */

        var box = document.getElementsByClassName('box')[0];

        function render(){
            // 当前时间
            var date = new Date();

            // 获取时分秒
            var hour = date.getHours();
            hour = hour<10 ? '0'+hour:hour+'';
            var minute = date.getMinutes();
            minute = minute<10 ? '0'+minute:minute+'';
            var second = date.getSeconds();
            second = second<10 ? '0'+second:second+'';

            // 渲染
            box.innerHTML = '<span>当前时间：</span><img src="./img/'+hour[0]+'.png" alt=""><img src="./img/'+hour[1]+'.png" alt=""><span>点</span><img src="./img/'+minute[0]+'.png" alt=""><img src="./img/'+minute[1]+'.png" alt=""><span>分</span><img src="./img/'+second[0]+'.png" alt=""><img src="./img/'+second[1]+'.png" alt=""><span>秒</span>';
        }

        // 初始化
        render();

        // 定时器
        setInterval(function(){
            render();
        },1000)
        

    </script>
</body>
</html>